import React, { FC } from "react";
import LineChart from "@/components/LineChart";
import useGetOnlineRateData from "@/hooks/useGetOnlineRateData";
import {
  OnlineRateRequestType,
  OnlineRatePropsType,
} from "@/types/echartInterface";
import { Spin } from "antd";
const LineView: FC<OnlineRateRequestType> = (props: OnlineRateRequestType) => {
  const { times } = props;
  const { data, loading } = useGetOnlineRateData(times);
  const {
    legendList = [],
    seriesList = [],
    xData = [],
  } = data as OnlineRatePropsType;
  const lineStyle = {
    width: "100%",
    height: "340px",
  };

  console.log(data, "ws");
  const {} = data;
  return (
    <div style={{ width: "100%" }}>
         {loading && (
        <div style={{ textAlign: "center" }}>
          <Spin />
        </div>
      )}
      {
        !loading && <LineChart
        lineStyle={lineStyle}
        legendList={legendList}
        seriesList={seriesList}
        xData={xData}
      />
      }
    </div>
  );
};

export default LineView;
